<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" ></el-input>
        <el-button icon="el-icon-search" type="primary"></el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="730"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              prop="date"
              label="投诉日期"
              width="180">
          </el-table-column>
          <el-table-column
              prop="name"
              label="投诉人"
              width="180">
          </el-table-column>
          <el-table-column
              prop="address"
              label="投诉内容">
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      pageSize: 10,
      pageNum:1,
      total:0,
    }
  },
  /*自动挂载*/
  mounted() {

  },
  /*函数*/
  methods:{
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>